<template>
  <div class="register">
    <div class="left">
      <div class="imga"></div>
    </div>
    <div class="right">
      <form action="" @submit.prevent="handleEdit">
        <div class="title">用户资料完善</div>
        <div class="profile-image">
          <div class="imgage" :class="img ? 'haveimg' : 'noimg'"></div>
          <label for="qq" class="edit"></label>
          <input id="qq" type="file" @change="show" style="display: none" />
        </div>
        <div class="youname">
          <div class="wenzi">姓名</div>
          <input type="text" v-model="username" />
        </div>
        <div class="email">
          <div class="wenzi">邮箱</div>
          <input type="email" v-model="emails[0].email" />
        </div>
        <div class="birthday">
          <div class="wenzi">生日</div>
          <el-date-picker
            v-model="birthDate"
            type="date"
            format="YYYY年MM月DD日"
            value-format="YYYY/MM/DD"
            :style="{ width: '100%', height: '100%', visibility: 'hidden', position: 'static' }"
          >
            <template #default="cell">
              <div class="cell" :class="{ current: cell.isCurrent }">
                <span class="text">{{ cell.text }}</span>
              </div>
            </template>
          </el-date-picker>
        </div>
        <div class="phone-number">
          <div class="wenzi">手机号码</div>
          <input type="tel" v-model="phoneNumber" />
          <div class="red-circle"></div>
          <div class="colum"></div>
        </div>
        <div class="sex">
          <div class="wenzi">性别</div>
          <select v-model="sex">
            <option :value="1">男</option>
            <option :value="0">女</option>
          </select>
        </div>
        <button class="submit">提交</button>
      </form>
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { modifyInfo } from '../../services/index'
import { useRouter } from 'vue-router'
import { reactive, toRefs, onMounted } from 'vue'

export default {
  setup(props) {
    const Router = useRouter()
    const userInfo = reactive(JSON.parse(localStorage.getItem('token')))

    onMounted(() => {
      document.querySelector('.el-input__prefix').remove()
    })

    if (!localStorage.getItem('token')) {
      ElMessage({
        message: '登录信息失效，请重新登录',
        type: 'warning'
      })
    }

    async function handleEdit() {
      let res = await modifyInfo(userInfo)
      ElMessage({
        message: '修改成功',
        type: 'success'
      })
      localStorage.setItem('token', JSON.stringify(res))
      Router.push('/')
    }

    function show() {
      userInfo.img = '1'
    }

    return {
      ...toRefs(userInfo),
      push: Router.push,
      handleEdit,
      show
    }
  }
}
</script>

<style lang="less">
@import '../auto_css/InfoImprove.less';
</style>
